<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>工作量详情</title>
<script type="text/javascript">
	
</script>
</head>
<body>
	<input type="hidden" id="totalwork" value="${workload.totalWork}" />
	<input type="hidden" id="accomplish" value="${workload.accomplish}" />
	<div id="main">
		<div class="demo">
			<div id="myChart" style="float: left; width: 50%; height: 800px;"></div>
			<div id="myChart2" style="float: left; width: 50%; height: 800px;"></div>
		</div>
	</div>
	<script type="text/javascript"
		src="${ctxStatic }/WorkLoad/echarts.min.js"></script>
	<script type="text/javascript">
		//当日计划工作量--start--
		var todayPlan = 0;
		function calculate() {
			var date = new Date();//构造当前日期对象
			var year = date.getFullYear();//获取年份
			var month = date.getMonth() + 1;//获取月份
			var dayIndex = date.getDate();//获取当前天数
			var days;//定义当月总天数
			//当月份为二月时，根据是否闰年判断天数
			if (month = 2) {
				if (((year % 4) == 0) && ((year % 100) != 0)
						|| ((year % 400) == 0)) {
					days = 29;
				} else {
					days = 28;
				}
			} else if (month == 1 || month == 3 || month == 5 || month == 7
					|| month == 8 || month == 10 || month == 12) {
				days = 31;
			} else {
				days = 30;
			}
			//当日计划量
			var totalwork = document.getElementById("totalwork").value;
			var accomplish = document.getElementById("accomplish").value;
			todayPlan = parseInt((totalwork - accomplish) / (days - dayIndex + 1));
		}
		calculate();
		//当日计划工作量--end--
		
		// 基于准备好的dom，初始化echarts实例(日视图)
		var myChart = echarts.init(document.getElementById('myChart'));
		option = {
				title : {
			        text: '今日工作量统计',
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['今日完成工作量','今日计划工作量'],
			        itemGap:50
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            dataView : {show: true, readOnly: true},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            data : ['今日完成工作量','今日计划工作量']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            type:'bar',
			            barWidth: 120,
			            data:['${workload.todayDone}',todayPlan],
			            barGap: 20,
			            barCategoryGap:'40%',
			        },
			    ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);

		//月视图
		var myChart2 = echarts.init(document.getElementById('myChart2'));
		option2 = {
				title : {
			        text: '本月工作量统计',
			    },
			    tooltip : {
			        trigger: 'axis'
			    },
			    legend: {
			        data:['本月完成工作量','本月计划工作量']
			    },
			    toolbox: {
			        show : true,
			        feature : {
			            dataView : {show: true, readOnly: true},
			            magicType : {show: true, type: ['line', 'bar']},
			            restore : {show: true},
			            
			        }
			    },
			    calculable : true,
			    xAxis : [
			        {
			            data : ['本月完成工作量','本月计划工作量']
			        }
			    ],
			    yAxis : [
			        {
			            type : 'value'
			        }
			    ],
			    series : [
			        {
			            type:'bar',
			            barWidth: 120,
			            data:['${workload.accomplish}', '${workload.totalWork}'],
			        },
			    ]
		};
		// 使用刚指定的配置项和数据显示图表。
		myChart2.setOption(option2);
	</script>
</body>
</html>